<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Image Recognition</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }
        .image-section, .result-section {
            width: 45%;
        }
        .image-section img, .result-section img {
            width: 100%;
            height: auto;
            border: 1px solid #ddd;
        }
        .result-section {
            background-color: #f8f8f8;
            padding: 10px;
        }
        .score-bar {
            margin-bottom: 10px;
        }
        .score-bar div {
            height: 10px;
            background-color: #4caf50;
        }
    </style>
</head>
<body>
<h1>Image Recognition</h1>

<div class="container">
    <!-- 显示上传的原始图片 -->
    <div class="image-section">
        <h2>Original Image</h2>
        <img id="originalImage" alt="Original Image">
    </div>

    <!-- 显示识别结果的图片和得分 -->
    <div class="result-section">
        <h2>Recognition Result</h2>
        <img id="resultImage" alt="Recognized Image">
        <div id="resultText">
            <!-- 识别结果的文字信息将动态插入到这里 -->
        </div>
    </div>
</div>

<!-- 上传图片的表单 -->
<form id="uploadForm" method="post" enctype="multipart/form-data">
    <input type="file" id="fileInput" name="file" accept="image/*" required>
    <button type="submit">Upload and Recognize</button>
</form>

<script>
    const form = document.getElementById('uploadForm');
    const fileInput = document.getElementById('fileInput');
    const originalImage = document.getElementById('originalImage');
    const resultImage = document.getElementById('resultImage');
    const resultText = document.getElementById('resultText');

    form.addEventListener('submit', function(event) {
        event.preventDefault(); // 防止表单的默认提交行为
        const file = fileInput.files[0];
        if (file) {
            const formData = new FormData();
            formData.append('file', file);

            // 显示上传的原图
            const reader = new FileReader();
            reader.onload = function(e) {
                originalImage.src = e.target.result;
            };
            reader.readAsDataURL(file);

            // 发送图片到后端进行识别
            fetch('http://localhost:8080/image/recognize', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json()) // 解析响应
            .then(data => {
                console.log("Response Body:", data);

                const base64Image = data.image; // 从响应中获取 base64 编码的识别图像
                // 显示识别结果的图像
                resultImage.src = 'data:image/jpeg;base64,' + base64Image;

                // 清空现有的结果文本
                resultText.innerHTML = '';

                // 显示识别结果的文字信息
                if (data.results && data.results.length > 0) {
                    data.results.forEach(result => {
                        const p = document.createElement('p');
                        p.textContent = `${result.name}: ${result.score}`;
                        resultText.appendChild(p);

                        const scoreBar = document.createElement('div');
                        scoreBar.className = 'score-bar';
                        const bar = document.createElement('div');
                        bar.style.width = (result.score * 100) + '%';
                        scoreBar.appendChild(bar);
                        resultText.appendChild(scoreBar);
                    });
                } else {
                    resultText.textContent = 'No results available';
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }
    });
</script>
</body>
</html>
